import React , {useState , useEffect} from 'react'
import { 
    Wrap ,
    Header,
    ShopCar,
    PayBar
} from './styled'
import { NavLink } from 'react-router-dom'
import { loadState , saveState } from 'utils/state'

export default function ShopCarUi() {
    // 获取商品数据
    let shops = loadState('OceanDockAddCart') || []

    // 定义保存hook数据和方法的数组
    let arr = []
    let arrFun = []
    for (var i = 0 ; i < shops.length ; i ++) {
        var [count , setCount] = useState(shops[i].num)
        // 将每一个hook的状态和方法放进数组中 以便后面调用
        arr.push(count)
        arrFun.push(setCount)
    }

    // 选择按钮
    let chooseArr = []
    const chooseFun = []
    for (var i = 0 ; i < shops.length ; i ++) {
        const [a , setA] = useState(false)
        chooseArr.push(a)
        chooseFun.push(setA)
    }
    // 检测全选 
    let res = chooseArr.every(item => item === true) 
    
    // 记数 总价
    // 不需要使用hook做响应式 因为点击选择按钮以后会重新渲染 在这里只需读取值
    let allPrice = 0
    let payCount = 0
    chooseArr.map((item , index) => {
        if(item) {
            // 记数
            payCount ++
            // 计算总价
            allPrice += shops[index].num * shops[index].price
        }
    })

    // 初始化总价
    
    // 计算总价 一旦依赖于某个值的变化而变化 就不需要用useState
    // allPrice = arr.reduce((val , item , index) => {
    //     chooseArr.map(item => {
    //     if(chooseArr[index]) {
    //         return val + shops[index].num * shops[index].price
    //     }
    //     })
    //     return 0
    // } , 0)

    return (
        <Wrap>
            <Header>
                <span>购物车 ({shops.length})</span>
                <div className="btn">
                    <NavLink to='/home'><span>
                        <img src="" alt=""/>    
                    </span></NavLink>
                    <NavLink to='/mine'><span>
                        <img src="" alt=""/>    
                    </span></NavLink>
                </div>
                <div className="let">海外买手会根据现行国家政策要求，通过不同的物流方式分别发货，其实对你没有影响啦~</div>
            </Header>
            <ShopCar>
                {
                    shops && shops.map((item , index) => {
                        return(
                            <div className="shops" key={item.let}>
                                <div className="btn">
                                    <span 
                                        // className={isChoose[index] ? 'active' : null} 
                                        className={chooseArr[index] ? 'active' : null} 
                                        // className={'active'} 
                                        onClick={() => {
                                            chooseFun[index](a => !a)
                                            // setIsChoose(isChoose => {
                                            //     isChoose[index] = !isChoose[index]
                                            //     // 需要返回一个新的地址 不然不会响应式
                                            //     return [...isChoose]
                                            // })   
                                        }}
                                    ></span>
                                </div>
                                <div className="main">
                                    <img src={item.pic} alt=""/>
                                    <div>
                                        <p>
                                            <span>包邮包税</span>
                                            韩国正品LG润膏洗发水护发素二合一 持久滋润修复滋养香水润发膏
                                        </p>
                                        <p>颜色分类:{item.let}</p>
                                    </div>
                                </div>
                                <div className="count">
                                    <span>¥{item.price}</span>
                                    <div>
                                        <span onClick={() => {
                                            if (arr[index] === 1) {
                                                return false
                                            }
                                            arrFun[index](count => count - 1)
                                            // 保存localStore
                                            shops[index].num --
                                            saveState('OceanDockAddCart' , shops)
                                        }}>-</span>
                                        <span>{arr[index]}</span>
                                        <span onClick={() => {
                                            arrFun[index](count => count + 1)
                                            // 保存localStore
                                            shops[index].num ++
                                            saveState('OceanDockAddCart' , shops)
                                        }}>+</span>
                                    </div>
                                    <i onClick={() => {
                                        shops.splice(index , 1)
                                        saveState('OceanDockAddCart' , shops)
                                        location.reload()
                                    }}></i>
                                </div>
                            </div>
                        )
                    })
                }
            </ShopCar>
            <PayBar>
                <div>
                    <span 
                        className={res ? 'active' : null} 
                        onClick={() => {
                            // 先判断是否是全选状态
                            if (res) {
                                for (var i = 0 ; i < chooseArr.length; i ++) {
                                    chooseFun[i](false)
                                }
                                return false
                            }
                            // 如果不是
                            for (var i = 0 ; i < chooseArr.length ; i ++) {
                                // 再判断是否为选中 如果没有选中改为选中 选中不做操作
                                if (!chooseArr[i]) chooseFun[i](a => !a)
                            }
                        }}
                    ></span>
                    全选
                </div>
                <div>
                    <p>
                        总价: <span>¥{allPrice}</span>
                    </p>
                    <p>(不含运费)</p>
                </div>
                <div>
                    去结算({res ? chooseArr.length : payCount})
                </div>
            </PayBar>
        </Wrap>
    )
}
